<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
            <el-form-item label="符号类型" prop="type">
                <el-select v-model="queryParams.typeName" placeholder="请选择符号类型" clearable>
                    <el-option v-for="item in optionType" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="符号名称" prop="symbolName">
                <el-input v-model="queryParams.symbolName" placeholder="请输入符号名称" clearable />
            </el-form-item>
            <el-form-item label="上传人" prop="userName">
                <el-input v-model="queryParams.userName" placeholder="请输入上传人" clearable />
            </el-form-item>
            <el-form-item label="上传日期" prop="time">
                <el-date-picker v-model="queryParams.time" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleQuery">查询</el-button>
                <el-button @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5" v-if="permission">
                <el-button type="primary" @click="handleUpload">
                    <svg-icon class-name="upload-icon" icon-class="upload" /><span style="margin-left:10px">上传</span>
                </el-button>
            </el-col>
            <el-col :span="1.5" v-if="permission">
                <el-button type="primary" icon="Delete" :disabled="multiple" @click="handleDelete">批量删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" icon="Download" :disabled="multiple" @click="handleDownloads">批量下载</el-button>
            </el-col>
        </el-row>

        <div style="margin-top: 20px;">
            <template v-if="dataList.length == 0">
                <el-empty description="暂无数据" />
            </template>
            <template v-else>
                <div v-for="item in dataList" :class="item.flag ? 'liList-select' : 'liList'">
                    <div class="imgIcon">
                        <template v-if="item.svgFlag == 0">
                            <img :src="baseUrl + item.attachId" alt="" class="img">
                        </template>
                        <template v-else>
                            <div v-html="item.svg" class="iconsvg"></div>
                        </template>
                    </div>
                    <span class="icon-name">{{ item.symbolName }}</span>
                    <div class="icon-cover">
                        <span :class="item.flag ? 'cover-select-line' : 'cover-item-line'"
                            @click="handleSelect(item)"><el-icon :size="20"><Select /></el-icon></span>
                        <span class="cover-item-line" @click="handleDown(item)"><el-icon :size="20">
                                <Download />
                            </el-icon></span>
                        <span class="cover-item-line" @click="handleview(item)"><el-icon :size="20">
                                <View />
                            </el-icon></span>
                    </div>
                </div>
            </template>
        </div>

        <el-dialog title="图形符号上传" v-model="openFile" width="500px" top="200px" append-to-body>
            <el-form ref="uploadRef" label-width="120px" :model="form" :rules="rules">
                <el-row style="margin: 20px 0;">
                    <el-col>
                        <el-form-item label="符号类型" prop="typeName">
                            <el-select v-model="form.typeName" placeholder="请选择符号类型" clearable style="width:100%">
                                <el-option v-for="item in optionType" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="符号上传" prop="attachId">
                            <file-upload :action="uploadFileUrl" :limit="1" ref="fileUpload" v-model="form.fileList"
                                @uploadFile="uploadFile" @click="delFile" :fileType='["png", "jpg", "svg"]' />
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="符号名称" prop="symbolName">
                            <el-input v-model="form.symbolName" placeholder="请输入模版名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="描述">
                            <el-input type="textarea" maxlength="100" show-word-limit :autosize="{ minRows: 3, maxRows: 5 }"
                                placeholder="请输入描述" v-model="form.symbolDesc" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="fileSubmitForm">保 存</el-button>
                    <el-button @click="openFile = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog title="查看符号" v-model="open" width="500px" top="200px" append-to-body>
            <el-form label-width="80px" :model="form">
                <el-row style="margin: 20px 0;">
                    <el-col>
                        <el-form-item label="符号类型">
                            <el-select v-model="form1.typeName" placeholder="请选择符号类型" disabled style="width:100%">
                                <el-option v-for="item in optionType" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="符号名称">
                            <el-input v-model="form1.symbolName" placeholder="请输入模版名称" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col v-if="!!form1.symbolDesc">
                        <el-form-item label="描述">
                            <el-input type="textarea" maxlength="100" show-word-limit :autosize="{ minRows: 3, maxRows: 5 }"
                                placeholder="请输入描述" v-model="form1.symbolDesc" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="上传人">{{ form1.userName }}</el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="上传时间">{{ form1.createTime }}</el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="open = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="figureSymbolManage">
import { getAllList, saveSymbol, delSymbol, getPermission, bathDownload } from "@/api/iconModle/figureSymbolManage.js"
const { proxy } = getCurrentInstance();
const dataList = ref([]);
const ids = ref();
const attachId = ref();
const loading = ref(false);
const multiple = ref(true);
const permission = ref(false);
const openFile = ref(false);
const optionType = [{ label: '基础地理', value: '基础地理' }, { label: '公共场所与服务机构', value: '公共场所与服务机构' }, { label: '地震相关符号', value: '地震相关符号' }, { label: '其他', value: '其他' }]
const baseUrl = import.meta.env.VITE_APP_PORTAL_API + "/attachment/downLoadFile?attachId="
const uploadFileUrl = ref(
    import.meta.env.VITE_APP_PORTAL_API + "/attachment/uploadFile"
); // 上传的图片服务器地址
const data = reactive({
    queryParams: {
        typeName: undefined,
        symbolName: undefined,
        symbolDesc: undefined,
        time: undefined,
        userName:undefined
    },
    form: {
        fileList: [],
        attachId: '',
        typeName: undefined,
        symbolName: undefined,
        describe: undefined,
    },
    form1: {},
    rules: {
        attachId: [{ required: true, message: "符号上传不能为空", trigger: "blur" }],
        symbolName: [{ required: true, message: "符号名称不能为空", trigger: "blur" }],
        typeName: [{ required: true, message: "符号类型不能为空", trigger: "change" }],
    }
})
const { queryParams, form, form1, rules } = toRefs(data)

watch(() => dataList.value, val => {
    if (val && val.length > 0) {
        let selection = [];
        selection = val.filter(item => !!item.flag);
        ids.value = selection.map(item => item.id);
        attachId.value = selection.map(item => item.attachId);
        multiple.value = !selection.length;
    } else {
        ids.value = undefined
        multiple.value = true;
    }
}, { deep: true, immediate: true });



/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.page = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    dataList.value = [];
    queryParams.value.typeName='';
    proxy.resetForm("queryRef");
    handleQuery();
}

/** 查询数据列表 */
function getList() {
    loading.value = true;
    getAllList({ ...queryParams.value, startTime: queryParams.value.time ? queryParams.value.time[0] : undefined, endTime: queryParams.value.time ? queryParams.value.time[1] : undefined }).then(response => {
        if (response.data.length > 0) {
            response.data.forEach(item => {
                item.flag = false;
            })
            dataList.value = response.data;
        } else {
            dataList.value = []
        }
        loading.value = false;
    });
}

/** 删除按钮操作 */
function handleDelete(row) {
    const id = row.id || ids.value.join(',');
    proxy.$modal.confirm('是否确认删除选中报告的数据项?').then(function () {
        return delSymbol(id);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}

// 上传 
function handleUpload() {
    openFile.value = true;
    form.value = {
        fileList: [],
        attachId: '',
        typeName: undefined,
        describe: undefined,
    },
        proxy.resetForm("uploadRef");
}
function uploadFile() {
    form.value.attachId = JSON.parse(JSON.stringify(proxy.$refs["fileUpload"].fileList))[0].attachId;
}

function delFile() {
    form.value.attachId = '';
}
function fileSubmitForm() {
    proxy.$refs["uploadRef"].validate(valid => {
        if (valid) {
            let fileName = JSON.parse(
                JSON.stringify(proxy.$refs["fileUpload"].fileList)
            )[0].name;
            const suffix = fileName.substring(fileName.lastIndexOf(".") + 1) == 'svg' ? '1' : 0;
            saveSymbol({ ...form.value, svgFlag: suffix }).then(res => {
                proxy.$modal.msgSuccess("上传成功");
                openFile.value = false;
                getList();
            })
        }
    })
}

// 单个下载文件
function handleDown(row) {
    var query = {
        attachId: row.attachId,
    }
    location.href = import.meta.env.VITE_APP_PORTAL_API + "/attachment/downLoadFile?attachId=" + encodeURIComponent(query.attachId);
}

/** 批量下载操作 */
function handleDownloads() {
    proxy.download(`${import.meta.env.VITE_APP_PORTAL_API}/attachment/zipDownload/${attachId.value.join(",")}`, {}, '图形符号.zip');
};

const open = ref(false);
// 查看符号描述
function handleview(item) {
    form1.value = item;
    open.value = true;
}

// 选中图标
function handleSelect(val) {
    dataList.value.forEach(item => {
        if (item.id == val.id) {
            item.flag = !item.flag;
        }
    })
}

function getPermissionAdmin() {
    getPermission().then(res => {
        permission.value = res.data;
    })
}
getPermissionAdmin();
getList();
</script>

<style lang="scss" scoped>
.liList-select {
    float: left;
    margin: 15px 13px;
    width: 100px;
    height: 105px;
    text-align: center;
    position: relative;
    overflow: visible;
    border: 1px dashed #60606d;
    border-radius: 5px;
}

.liList {
    float: left;
    margin: 15px 13px;
    width: 100px;
    height: 105px;
    text-align: center;
    position: relative;
    overflow: visible;
    border: 1px dashed transparent;
    border-radius: 5px;
}

.imgIcon {
    display: inline-block;
    margin-top: 18px;
    width: 36px;
    height: 36px;

    .iconsvg {
        width: 36px !important;
        height: 36px !important;
    }

    .img {
        width: 36px;
        height: 36px;
    }
}

.icon-name {
    display: block;
    width: 100%;
    height: 20px;
    line-height: 20px;
    color: #666;
    font-size: 14px;
    text-align: center;
    margin-top: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.icon-cover {
    width: 100%;
    height: 100%;
    background: rgba(13, 10, 49, .9);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    display: none;
    overflow: hidden;
    vertical-align: middle;
    border-radius: 5px;

    .cover-item-line {
        display: flex;
        width: 100%;
        height: 35px;
        align-items: center;
        color: #fff;
        justify-content: center;
    }

    .cover-select-line {
        display: flex;
        width: 100%;
        height: 35px;
        align-items: center;
        color: #00f9e5;
        justify-content: center;
    }

    .cover-item-line:hover {
        background-color: #000;
        color: #00f9e5;
    }

    .cover-select-line:hover {
        background-color: #000;
        color: #00f9e5;
    }
}

.liList:hover .icon-cover {
    display: block;
}

.liList-select:hover .icon-cover {
    display: block;
}
</style>

<style lang="scss">
.iconsvg {
    width: 36px !important;
    height: 36px !important;
    svg {
        width: 36px !important;
        height: 36px !important;
    }
}
</style>